<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 商品管理系统</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <style>
        .order-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .order-header {
            background-color: #f8f9fa;
            padding: 15px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .order-number {
            font-weight: bold;
        }
        
        .order-status {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
        }
        
        .status-paid {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        
        .status-shipped {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-delivered {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        
        .status-completed {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-cancelled {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .order-body {
            padding: 15px;
        }
        
        .order-items {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .order-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            width: calc(50% - 8px);
        }
        
        .order-item img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .order-item-info {
            flex: 1;
        }
        
        .order-item-name {
            font-weight: bold;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .order-item-spec {
            color: #666;
            font-size: 12px;
            margin-bottom: 5px;
        }
        
        .order-item-price {
            color: #e44d26;
            font-weight: bold;
        }
        
        .order-item-quantity {
            color: #666;
            font-size: 12px;
        }
        
        .order-footer {
            padding: 15px;
            border-top: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .order-total {
            font-weight: bold;
            font-size: 16px;
        }
        
        .order-actions {
            display: flex;
            gap: 10px;
        }
        
        .empty-orders {
            text-align: center;
            padding: 50px 0;
        }
        
        .empty-orders i {
            font-size: 64px;
            color: #ccc;
            margin-bottom: 20px;
        }
        
        .status-tabs {
            margin-bottom: 20px;
        }
        
        .status-tabs .nav-link {
            color: #666;
            border: none;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            padding: 10px 15px;
        }
        
        .status-tabs .nav-link.active {
            color: #e44d26;
            background-color: transparent;
            border-bottom-color: #e44d26;
        }
        
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header th:replace="shop/fragments/header :: header"></header>
    
    <div class="container mt-4">
        <div class="row">
            <!-- 左侧菜单 -->
            <div class="col-md-3">
                <div th:replace="shop/fragments/profile-sidebar :: profile-sidebar"></div>
            </div>
            
            <!-- 右侧内容 -->
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">我的订单</h4>
                    </div>
                    <div class="card-body">
                        <!-- 订单状态标签页 -->
                        <ul class="nav nav-tabs status-tabs" id="orderTabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link" th:classappend="${status == 'all'} ? 'active'" href="/orders?status=all">全部订单</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" th:classappend="${status == 'pending'} ? 'active'" href="/orders?status=pending">待付款</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" th:classappend="${status == 'paid'} ? 'active'" href="/orders?status=paid">待发货</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" th:classappend="${status == 'shipped'} ? 'active'" href="/orders?status=shipped">待收货</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" th:classappend="${status == 'completed'} ? 'active'" href="/orders?status=completed">已完成</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" th:classappend="${status == 'cancelled'} ? 'active'" href="/orders?status=cancelled">已取消</a>
                            </li>
                        </ul>
                        
                        <!-- 订单列表 -->
                        <div th:if="${#lists.isEmpty(orders)}" class="empty-orders">
                            <i class="fas fa-shopping-bag"></i>
                            <h5>暂无订单</h5>
                            <p class="text-muted">您还没有任何订单，快去逛逛吧！</p>
                            <a href="/" class="btn btn-primary">去购物</a>
                        </div>
                        
                        <div th:each="order : ${orders}" class="order-card">
                            <div class="order-header">
                                <div class="order-number">
                                    订单号：<span th:text="${order.orderNumber}">2023010112345678</span>
                                </div>
                                <div class="order-status" th:classappend="'status-' + ${order.status}">
                                    <span th:if="${order.status == 'pending'}">待付款</span>
                                    <span th:if="${order.status == 'paid'}">待发货</span>
                                    <span th:if="${order.status == 'shipped'}">待收货</span>
                                    <span th:if="${order.status == 'delivered'}">已送达</span>
                                    <span th:if="${order.status == 'completed'}">已完成</span>
                                    <span th:if="${order.status == 'cancelled'}">已取消</span>
                                </div>
                            </div>
                            <div class="order-body">
                                <div class="order-items">
                                    <div th:each="item : ${order.items}" class="order-item">
                                        <img th:src="${item.image}" th:alt="${item.name}" src="/images/product1.jpg" alt="商品图片">
                                        <div class="order-item-info">
                                            <div class="order-item-name" th:text="${item.name}">商品名称</div>
                                            <div class="order-item-spec" th:text="${item.specification}">规格</div>
                                            <div class="order-item-price">¥<span th:text="${item.price}">99.00</span></div>
                                        </div>
                                        <div class="order-item-quantity">x<span th:text="${item.quantity}">1</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="order-footer">
                                <div class="order-total">
                                    共<span th:text="${order.totalQuantity}">1</span>件商品 合计：<span style="color: #e44d26;">¥<span th:text="${order.totalAmount}">99.00</span></span>
                                </div>
                                <div class="order-actions">
                                    <a th:href="@{'/orders/' + ${order.id}}" class="btn btn-sm btn-outline-primary">查看详情</a>
                                    
                                    <!-- 根据订单状态显示不同操作按钮 -->
                                    <button th:if="${order.status == 'pending'}" class="btn btn-sm btn-danger cancel-order" th:data-id="${order.id}">取消订单</button>
                                    <button th:if="${order.status == 'pending'}" class="btn btn-sm btn-success" th:onclick="'location.href=\'/order/pay/' + ${order.id} + '\''">立即付款</button>
                                    <button th:if="${order.status == 'shipped'}" class="btn btn-sm btn-success confirm-receipt" th:data-id="${order.id}">确认收货</button>
                                    <button th:if="${order.status == 'delivered' or order.status == 'completed'}" class="btn btn-sm btn-outline-primary" th:onclick="'location.href=\'/order/review/' + ${order.id} + '\''">评价</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 分页 -->
                        <div th:if="${totalPages > 1}" class="pagination-container">
                            <nav aria-label="订单分页">
                                <ul class="pagination">
                                    <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled'">
                                        <a class="page-link" th:href="@{/orders(status=${status}, page=${currentPage - 1}, size=${size})}" tabindex="-1">上一页</a>
                                    </li>
                                    
                                    <li th:each="i : ${#numbers.sequence(1, totalPages)}" class="page-item" th:classappend="${i == currentPage} ? 'active'">
                                        <a class="page-link" th:href="@{/orders(status=${status}, page=${i}, size=${size})}" th:text="${i}">1</a>
                                    </li>
                                    
                                    <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled'">
                                        <a class="page-link" th:href="@{/orders(status=${status}, page=${currentPage + 1}, size=${size})}">下一页</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部 -->
    <footer th:replace="shop/fragments/footer :: footer"></footer>
    
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/toast.js"></script>
    <script>
        $(document).ready(function() {
            // 取消订单
            $('.cancel-order').click(function() {
                const orderId = $(this).data('id');
                
                if (confirm('确定要取消这个订单吗？')) {
                    $.ajax({
                        url: '/order/cancel/' + orderId,
                        type: 'POST',
                        success: function(response) {
                            if (response.success) {
                                showToast(response.message, 'success');
                                setTimeout(() => {
                                    location.reload();
                                }, 1000);
                            } else {
                                showToast(response.message, 'error');
                            }
                        },
                        error: function() {
                            showToast('取消订单失败，请重试', 'error');
                        }
                    });
                }
            });
            
            // 确认收货
            $('.confirm-receipt').click(function() {
                const orderId = $(this).data('id');
                
                if (confirm('确认已收到商品？')) {
                    $.ajax({
                        url: '/order/confirm/' + orderId,
                        type: 'POST',
                        success: function(response) {
                            if (response.success) {
                                showToast(response.message, 'success');
                                setTimeout(() => {
                                    location.reload();
                                }, 1000);
                            } else {
                                showToast(response.message, 'error');
                            }
                        },
                        error: function() {
                            showToast('确认收货失败，请重试', 'error');
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>